<template>
    <div class="WorkingSchedule" v-loading="loading">
        <el-form ref="form" :model="form" label-position="top" class="myform">
            <div>
                <el-form-item label="绣花厂" class="myform-item">
                    <el-select v-model="form.supplier_id" placeholder="请选择" clearable @keyup.enter.native="onSearch">
                        <el-option v-for="item in factoryList" :key="item.supplier_id" :label="item.factory_name" :value="item.supplier_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="对账单 年/月" class="myform-item">
                    <el-date-picker v-model="form.recon_time" type="month" value-format="yyyy-MM" placeholder="选择月" @keyup.enter.native="onSearch"></el-date-picker>
                </el-form-item>
                <el-form-item label="推送状态:" class="myform-item">
                    <el-select v-model="form.is_push" placeholder="请选择" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <el-form-item style="margin-top: 50px" class="myform-item">
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column label="品牌" align="center" prop="brand_name"></el-table-column>
            <el-table-column label="绣花厂" align="center" prop="factory_name"></el-table-column>
            <el-table-column label="年/月" align="center" prop="recon_time"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="create_time"></el-table-column>
            <el-table-column label="回货总数" align="center" prop="num"></el-table-column>
            <el-table-column label="推送金蝶" align="center" prop="status">
                <template slot-scope="{ row }">
                    <div :style="{color: row.is_push == 1 ? '#67C23A' : '#c0c4cc',}">{{ row.is_push == 1 ? "已推送" : "待推送" }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" v-if="scope.row.is_push != 1" @click="pushReconciliationBtn(scope.$index, scope.row)"
                               :loading="selectIndex==scope.$index && pushLoading">推送</el-button>
                    <el-button type="text" @click="openReconciliationDetailBtn(scope.$index, scope.row)"
                               :loading="selectIndex==scope.$index && openLoading">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :form="form" :total="total" @paginationPostOrderTaskList="postAdminPricingGetReconciliationOrderList"/>

        <!-- 详情 -->
        <el-drawer :title="reconciliationTitle" :visible.sync="visible" direction="rtl" size="70%">
            <el-table :data="detailData" style="width: 100%" border :height="drawHeight">
                <el-table-column label="序号" align="center" type="index" width="90"></el-table-column>
                <el-table-column label="生产加工单" align="center" prop="processing_code"></el-table-column>
                <el-table-column label="款号" align="center" prop="type_no"></el-table-column>
                <el-table-column label="款名" align="center" prop="type_name"></el-table-column>
                <el-table-column label="sku" align="center" prop="sku_code"></el-table-column>
                <el-table-column label="绣花单价" align="center" prop="contract_machining_price"></el-table-column>
                <el-table-column align="center">
                    <template slot="header" slot-scope="scope">
                        回货数量
                        <el-tooltip effect="light" content="导出Excel" placement="top-start">
                            <el-button type="text" @click="onExport">
                                <svg style="vertical-align: text-bottom;" t="1715743242259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" width="20" height="20"><path d="M595.2 755.2h128v88.32L954.88 710.4 723.2 576v89.6h-128zM266.24 134.4c0-6.4 6.4-12.8 12.8-12.8H652.8c3.84 0 7.68 0 12.8 1.28v198.4H864c1.28 5.12 1.28 29.44 1.28 33.28v252.16l49.92 30.72v-281.6c0-34.56-20.48-102.4-43.52-126.72L760.32 117.76C736 93.44 688.64 74.24 654.08 74.24H279.04c-34.56 0-62.72 28.16-62.72 62.72V262.4h49.92v-128z m449.28 10.24c3.84 2.56 6.4 5.12 8.96 7.68l111.36 111.36c2.56 2.56 5.12 5.12 7.68 8.96h-128v-128z" fill="#22975D" p-id="3234"></path><path d="M595.2 385.28H800v58.88H595.2z m270.08 503.04c0 6.4-6.4 12.8-12.8 12.8H279.04c-6.4 0-12.8-6.4-12.8-12.8v-42.24h-49.92v42.24c0 34.56 28.16 62.72 62.72 62.72h574.72c34.56 0 62.72-28.16 62.72-62.72V783.36l-49.92 29.44v75.52zM537.6 320H69.12v468.48H537.6V320zM367.36 687.36l-64-94.72-28.16 43.52h28.16v52.48H160l104.96-153.6L172.8 396.8h76.8l55.04 80.64 55.04-80.64h76.8l-92.16 138.24 104.96 153.6h-81.92z m227.84-185.6H800v58.88H595.2z" fill="#22975D" p-id="3235"></path></svg>
                            </el-button>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        {{scope.row.qty}}
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 10px;">
                <span style="margin: 0 60px">总价：{{totalPrice}}</span>
                <span style="margin: 0 60px">总回货数：{{totalNum}}</span>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import {
    postAdminPricingGetReconciliationOrderZGList,
    postAdminPricingGetReconciliationOrderZGDetailList,
    postAdminPricingGetReconciliationOrderZGPushlList,
    postHomeCodeGetFactory, postAdminPricingDelReconciliationOrder,
} from "@/api";
const ExcelJS = require("exceljs");
import FileSaver from "file-saver";
import pagination from "@/components/pagination.vue";
export default {
    components: { pagination },
    data() {
        return {
            qxobj: {},
            loading: false,
            factoryList: [],
            options: [
                {
                    value: 0,
                    label: "待推送",
                },
                {
                    value: 1,
                    label: "已推送",
                }
            ],
            form: {
                supplier_id: "",
                recon_time: "",
                is_push: 0,
                page: 1,
                size: 10,
            },
            tableData: [],
            total: 0,

            visible: false,
            drawHeight: window.innerHeight - 115+"px",
            openLoading: false,
            pushLoading: false,
            selectIndex: 0,
            reconciliationTitle: "对账单详情",
            detailData: [],
            totalPrice: 0,
            totalNum: 0
        };
    },
    mounted() {
        if (this.$route.query.qxobj) {
            this.qxobj = JSON.parse(this.$route.query.qxobj);
        }
        this.postHomeCodeGetFactory();
        this.onSearch();
    },
    methods: {
        // 加工厂列表
        postHomeCodeGetFactory() {
            let obj = {
                type: 2,
                page: 1,
                size: 1000,
            };
            postHomeCodeGetFactory(obj).then((res) => {
                this.factoryList = res.data;
            });
        },
        // 搜索
        onSearch() {
            this.form.page = 1;
            this.form.size = 10;
            this.postAdminPricingGetReconciliationOrderList(this.form);
        },
        // 列表
        postAdminPricingGetReconciliationOrderList(data) {
            this.loading = true;
            this.form = data;
            postAdminPricingGetReconciliationOrderZGList(data).then((res) => {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = Number(res.data.total);
            }).catch((err) => {
                this.loading = false;
            });
        },
        //推送
        pushReconciliationBtn(index, row){
            this.selectIndex = index;
            this.pushLoading = true;
            this.$confirm("【绣花暂估对账单】推送金蝶, 请确认数据是否正确?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                postAdminPricingGetReconciliationOrderZGPushlList({id: row.id}).then((res) => {
                    this.pushLoading = false;
                    if(res.code === 0){
                        this.$message.success("推送成功");
                        this.postAdminPricingGetReconciliationOrderList(this.form);
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.pushLoading = false;
                })
            }).catch(() => {
                this.pushLoading = false;
            });

        },
        //账单 详情
        openReconciliationDetailBtn(index, row){
            this.selectIndex = index;
            this.openLoading = true;
            this.reconciliationTitle = row.factory_name+"（"+row.recon_time+"）";
            postAdminPricingGetReconciliationOrderZGDetailList({id: row.id}).then((res) => {
                this.openLoading = false;
                this.visible = true;
                this.detailData = res.data.list;
                this.totalNum = res.data.total;
                this.totalPrice = res.data.totalPrice;
            }).catch(()=>{
                this.openLoading = false;
            });
        },
        //excel导出
        onExport() {
            let data = [];
            for (let index = 0; index < this.detailData.length; index++) {
                let arr = [];
                arr[0] = this.detailData[index].processing_code;
                arr[1] = this.detailData[index].type_no;
                arr[2] = this.detailData[index].type_name;
                arr[3] = this.detailData[index].sku_code;
                arr[4] = this.detailData[index].contract_machining_price;
                arr[5] = this.detailData[index].qty;
                data.push(arr);
            }
            const tableTitle = this.reconciliationTitle + " 绣花暂估对账详情";
            const workbook = new ExcelJS.Workbook();
            workbook.creator = tableTitle;
            workbook.lastModifiedBy = tableTitle;
            workbook.created = new Date();
            workbook.modified = new Date();
            // 将工作簿日期设置为 1904 年日期系统
            // workbook.properties.date1904 = true;
            const worksheet = workbook.addWorksheet(tableTitle);
            worksheet.properties.defaultColWidth = 26; // 默认列宽
            worksheet.properties.defaultRowHeight = 20; // 默认行高
            //定义回货单标题
            const purchaseinrow = worksheet.getRow(1);
            purchaseinrow.height = 50;
            const purchaseincell = worksheet.getCell("A1");
            worksheet.mergeCells("A1:F1");
            purchaseincell.value = this.reconciliationTitle + " 绣花暂估对账单详情";
            purchaseincell.font = { name: "宋体", family: 4, size: 14, bold: true }; // 字体
            purchaseincell.alignment = { vertical: "middle", horizontal: "center" }; //对齐

            worksheet.addTable({
                name: "purchasein",
                ref: "A2",
                displayName: "",
                headerRow: true, // 在表格顶部显示标题
                filterButton: false, // 切换标题中的过滤器控件
                totalsRow: false, // 在表格底部显示总计
                style: {
                    theme: "TableStyleLight8",
                },
                columns: [
                    { name: "生产加工单" },
                    { name: "款号" },
                    { name: "款名" },
                    { name: "sku" },
                    { name: "绣花单价" },
                    { name: "回货数量" }
                ],
                rows: data,
            });
            //定义回货单总计标题
            const purchaseintitlerow = worksheet.getRow(data.length + 3);
            purchaseintitlerow.height = 50;
            const purchaseintitlecell = worksheet.getCell(
                `A${data.length + 3}`
            );
            worksheet.mergeCells(
                `A${data.length + 3}:F${data.length + 3}`
            );
            purchaseintitlecell.value = `总价：${this.totalPrice}     回货总数：${this.totalNum}`;
            purchaseintitlecell.font = {
                name: "宋体",
                family: 4,
                size: 14,
                bold: true,
            }; // 字体
            purchaseintitlecell.alignment = {
                vertical: "middle",
                horizontal: "center",
            }; //对齐
            workbook.xlsx.writeBuffer().then((buffer) => {
                // eslint-disable-next-line no-undef
                console.log("buffer", buffer);
                FileSaver.saveAs(
                    new Blob([buffer], {
                        type: "application/octet-stream",
                    }),
                    `${tableTitle}.xlsx`
                );
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.myform {
    display: flex;
    justify-content: space-between;
    > div {
        display: flex;
    }
    &-item {
        margin-right: 10px;
    }
}
.WorkingSchedule {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
}
</style>
